<template>
  <div class="app-container">
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      max-height="690"
      highlight-current-row
      style="width: 100%;"
      :row-style="{height:'32px'}"
      tooltip-effect="light"
    >
      <el-table-column label="编号" align="center" fixed>
        <template slot-scope="{row}">
          <span>{{ row.feedbackId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户ID" align="center">
        <template slot-scope="{row}">
          <span>{{ row.userId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户姓名" align="center">
        <template slot-scope="{row}">
          <span>{{ row.realName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="图片" align="center">
        <template slot-scope="{row}">
          <el-image style="max-width: 50px; max-height: 28px" :src="row.img" fit="contain" :preview-src-list="[row.img]" />
        </template>
      </el-table-column>
      <el-table-column label="意见内容" align="center" show-overflow-tooltip max-width="300px">
        <template slot-scope="{row}">
          <span>{{ row.content }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否已读" align="center">
        <template slot-scope="{row}">
          <el-tag v-if="row.progress===0" size="mini" type="danger">未读</el-tag>
          <el-tag v-if="row.progress===1" size="mini" type="success">已读</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="提交时间" align="center">
        <template slot-scope="{row}">
          <span>{{ row.createTime }} </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" :disabled="row.progress===1" @click="handleRead(row.feedbackId)">
            设为已读
          </el-button>
          <el-button type="danger" size="mini" @click="handleDelete(row.feedbackId)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page-num.sync="listQuery.pageNum" :page-size.sync="listQuery.pageSize" @pagination="showUserFeedback" />

  </div>
</template>

<script>
import { showUserFeedback, readUserFeedback, deleteUserFeedback } from '@/api/users'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination/index'

export default {
  name: 'Feedback',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      tableKey: 0,
      list: [],
      total: 0,
      listLoading: true,
      dialogLoading: false,
      listQuery: {
        pageNum: 1,
        pageSize: 20
      }
    }
  },
  created() {
    this.showUserFeedback()
  },
  methods: {
    showUserFeedback() {
      this.listLoading = true
      showUserFeedback(this.listQuery).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.showUserFeedback()
    },
    handleRead(feedbackId) {
      readUserFeedback(feedbackId).then(() => {
        this.showUserFeedback()
        this.dialogFormVisible = false
        this.$notify({
          title: 'Success',
          message: '设为已读成功',
          type: 'success',
          duration: 2000
        })
      })
    },
    handleDelete(feedbackId) {
      this.$confirm('此操作将删除该意见反馈, 是否继续?', '提示', {
        confirmButtonText: '确认删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteUserFeedback(feedbackId).then(() => {
          this.showUserFeedback()
          this.dialogFormVisible = false
          this.$notify({
            title: 'Success',
            message: '删除意见反馈成功',
            type: 'success',
            duration: 2000
          })
        })
      })
    }
  }
}
</script>
